<!-- 柱形图组件 -->
<template>
    <div id="Barbox">
        <div id="barwrap"></div>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
// 引入请求接口
import { getBarData } from "@/http/http";
export default {
    data() {
        return {
            myChart: "",
        };
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("barwrap"));

        // 绘制图表
        getBarData().then((res) => {
            if (res.code == 200) {
                console.log('res.data', res.data);

                this.myChart.setOption(this.options(res.data));
            }
        });

    },
    methods: {
        options(val) {
            let option = {
                title: {
                    text: "2115班每天出勤统计",
                },
                tooltip: {
                    formatter: "{b0}: {c0}%",  //显示百分比
                },
                xAxis: {
                    data: val.xAxisData,
                },
                grid: {},
                yAxis: {
                    name: "出勤率",
                    axisLine: {  //线样式
                        show: true, // 显示y轴轴线
                        lineStyle: {
                            type: "solid",  //实线
                        },
                    },
                },
                series: [
                    {
                        name: "出勤率",
                        type: "bar",
                        data: val.seriesData,
                    },
                ],
            };

            return option;
        },
    },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */

#barwrap {
    width: 100%;
    height: 500px;
}
</style>